<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="../include/head.jsp" %>
<%@ include file="../include/top.jsp" %>
<%@ include file="../include/left.jsp" %>
<div class="main-content">

    <%@ include file="../include/navigate.jsp" %>
    
    <div class="container">
        <div class="widget-box">
            <div class="widget-box-header">
                <div class="col-sm-2">
                    <div class="title"><i class="icon-edit">&nbsp;</i>新建角色</div>
                </div>
            </div>
            <div class="widget-box-content" style="padding:15px;">
            <div id="saveStatus"></div>
            <c:if test="${not empty message}">
                <div class="alert alert-danger" role="alert">${message}</div>
            </c:if>
            <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/role/add" method="post">
                <div class="form-group">
                    <label class="col-sm-2 control-label">角色名称:</label>

                    <div class="col-sm-8">
                    	<input type="text" class="input-mask-rolename" name="" style="width:100%;" id="roleName" data-toggle="tooltip" data-placement="left" required>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="rolename_tips" style="text-align:left;color:#D16E6C;" hidden="true" >字符长度必须超过2!</div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">角色描述:</label>

                    <div class="col-sm-8">
                        <input type="text" class="input-mask-des" name="des" style="width:100%;" oninput="validate(this)" onclick="validate(this)" required />
                    </div>
                    
                    <div class="col-sm-2 control-label" id="des_tips" style="text-align:left;color:#D16E6C;" hidden="true" >不能为空!</div>

                </div>
                
                
                <div class="form-group">
						<label class="col-sm-2 control-label">权限设置:</label>
						<div class="col-sm-8">
							<table class="table table-hover table-bordered">
								<tbody>
								<td><strong>菜单项</strong></strong></td>
								<td><strong>可执行操作</strong></strong></td>
								
								<c:forEach items="${permissionArray}" var="permission">
									<c:set var="isPrint" value="true"></c:set>
									<c:forEach items="${permission.value}" var="subPermission">
										<tr>
											<c:if test="${isPrint}">
												<c:set var="isPrint" value="false"></c:set>
												<td rowspan="${permission.value.size()}"><input type="checkbox" name="${permission.key}" onclick="cascadeSub(this)"></input>&nbsp;&nbsp;${permission.key}</td>
											</c:if>
											<c:set var="permissionArray" value="${subPermission.code.split(':')}"></c:set>
											<c:set var="permissionArrayLength" value="${fn:length(permissionArray)}"></c:set>
											<c:set var="printChecked" value="${(subPermission.enable=='true')? 'checked':''}"></c:set>
											<c:set var="printDisable" value="${(subPermission.editable=='false')? 'disabled':''}"></c:set>
											<td><input type="checkbox" value="${subPermission.code}" name="${permission.key}_sub" ${printChecked} ${printDisable} onclick="cascadeParent(this)">&nbsp;&nbsp;${permissionArray[permissionArrayLength - 1]}</input></td>
										</tr>
									</c:forEach>
								</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
                
                
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>

                    <div class="col-sm-2">
                        <button type="button" class="btn btn-success" onclick="submitRoleData()">提交</button>
                        <a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/role/list">
                            返回列表
                        </a>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <div style="position:fixed;bottom:0px; width:100%;" align="center">
    	<%@ include file="../include/footer.jsp" %>
    </div>
</div>

<script type="text/javascript">
	$('.input-mask-rolename').inputmask('a{2,}', {
		onincomplete : function() {
			$('#rolename_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#rolename_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});

	function validate(button){
		if($(button).val().length < 1){
			$('#des_tips').prop("hidden", false);
			return false;
		} else {
			$('#des_tips').prop("hidden", true);
			return true;
		}
	}
</script>

<script type="text/javascript">
	$(document).ready(function(){
		
		function setParentStatus(parentNode){
			var parentName = $(parentNode).attr("name");
			var parentNode = $(":checkbox[name=" + parentName + "]");
			var childrenNodes = $(":checkbox[name=" + parentName + "_sub]");
			
			var childrenNum = childrenNodes.length;
			var checkedNum = 0;
			var disableNum = 0;
			$.each(childrenNodes, function(index, value){
				if(true == $(value).prop("checked")){
					checkedNum++;
				}
				
				if(true == $(value).prop("disabled")){
					disableNum++;
				}
			});
			
			if(checkedNum == 0){
				parentNode.prop("checked", false);
				parentNode.prop("indeterminate", false);
			} else if(checkedNum > 0 && checkedNum < childrenNum){
				parentNode.prop("indeterminate", true);
			} else{
				parentNode.prop("indeterminate", false);
				parentNode.prop("checked", true);
			}
			
			if(disableNum > 0){
				parentNode.prop("disabled", true);
			}
		}
		
		function InitParentStatus(){
			parentNodes = $(":checkbox").not(":checkbox[name$='_sub']"); // select all parent node
			$.each(parentNodes, function(index, value){
				setParentStatus(value);
			});
		}
		
		InitParentStatus();
		
		window.cascadeSub = function(parentNode){
			var parentName = $(parentNode).attr("name");
			var parentStatus = $(parentNode).prop("checked");
			var childrenName = parentName + "_sub";
			
			if(true == parentStatus){ // if parent node checked? if checked, checked sub nodes
				$.each($(":checkbox[name=" + childrenName + "]"), function(index, value){
					$(value).prop("checked", true);
				});
			} else {
				$.each($(":checkbox[name=" + childrenName + "]"), function(index, value){
					$(value).prop("checked", false);
				});
			}
		};
		
		window.cascadeParent = function(childNode){
			var childName = $(childNode).attr("name");
			var parentName = childName.replace("_sub", "");
			var parentNode = $(":checkbox[name=" + parentName + "]");
			
			setParentStatus(parentNode);
		};
		
		window.getPermissions = function(){
			var permissions = "";
			$.each($(":checked[name$='_sub']"), function(index, value){
				permissions += $(value).val() + ";";
			});
			
			return permissions;
		};
		
		window.check = function() {
			if (!$('.input-mask-rolename').inputmask("isComplete")){
				$('#rolename_tips').prop("hidden", false);
				return false;
			}
			
			return validate($('.input-mask-des'));
		};
		
		window.submitRoleData = function(){
			
			if(!check()){
				scroll(0, 0);
				return false;
			}
			
			$.ajax({  
	        	type:'post',
	            url: '/role/add',
	            data: {"roleName": $('#roleName').val(), "des": $("input[name='des']").val(), "permissions": encodeURI(getPermissions())},  
	            cache:false,    
	            dataType:'json',    
	            success: function(data) {  
	            	if(data == 'success'){
	            		location.href = "/role/list?msg=添加成功！";
					} else {
						operationFailedWithMessage(data);
					}
	            },    
	            error : function() {
	            	operationFailed();
	            }
	        });
			
		}
	});
</script>

<%@ include file="../include/bottom.jsp" %>
